// 轮播图不能轮播的原因
//   1 假如一开始 data 是没有数据的 那么 Carousel 无法自动轮播
//   2 假如一开始 data 是有数据的 那么 Carousel 可以显示也可以轮播
//   3 有真实的轮播图数据
//     才渲染 Carousel

import React, { Component } from 'react'
import { Carousel } from 'antd-mobile';
import Axios from 'axios';

// 这里是本地图片路经
import nav1 from "../../assets/images/nav-1.png"
import nav2 from "../../assets/images/nav-2.png"
import nav3 from "../../assets/images/nav-3.png"
import nav4 from "../../assets/images/nav-4.png"

//  这是 scss 样式
import Css from "./index.module.scss"

class Index extends Component {
    state = {
        // 轮播图数据  因为是这里先没有数据,再发送请求,所以会有一个 bug 轮播图不会自动轮播
        swiperList: [],
        // 因为请求数据没有那么快回来，图片会有几秒是 0 长度的 所以先渲染176，数据回来在渲染
        imgHeight: 176,
        // 导航栏数据
        navs: [
            { id: 0, name: "整租", src: nav1 },
            { id: 1, name: "合租", src: nav2 },
            { id: 2, name: "地图找房", src: nav3 },
            { id: 3, name: "去出租", src: nav4 }
        ],
        // 租房小组
        groupList: [],
        // 最新资讯
        newlist: []
    }
    componentDidMount() {
        // 调用轮播图数据
        this.getSwiperList();
        this.getGroupList();
        this.getNewList();
    }

    // 获取轮播图数据
    getSwiperList() {
        // 发送请求参数
        Axios.get("http://157.122.54.189:9060/home/swiper")
            .then(res => {
                // 修改 state 的数据
                this.setState({ swiperList: res.data.body })
            })
    }
    // 获取租房小组
    getGroupList() {
        // 发送请求参数
        Axios.get("http://157.122.54.189:9060/home/groups")
            .then(res => {
                // 修改 state 的数据
                this.setState({ groupList: res.data.body })
            })
    }
    // 获取租房小组
    getNewList() {
        // 发送请求参数
        Axios.get("http://157.122.54.189:9060/home/news")
            .then(res => {
                // 修改 state 的数据
                this.setState({ newlist: res.data.body })
                console.log(res.data.body);
            })
    }

    render() {
        // 解构出来
        const { swiperList, navs, groupList, newlist } = this.state
        return (
            <div className={Css.index}>
                {/* 1.0 轮播图 开始 */}
                <div className={Css.index_carousel}>
                    {/* 判断一下如果有长度就渲染没有就不做渲染 */}
                    {swiperList.length && <Carousel
                        autoplay
                        infinite
                    >
                        {this.state.swiperList.map(val => (
                            <a
                                key={val.id}
                                href="http://www.alipay.com"
                                style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                            >
                                <img
                                    // 这里因为后端没有返回端口 所以我们要手动添加端口
                                    src={"http://157.122.54.189:9060" + val.imgSrc}
                                    alt=""
                                    style={{ width: '100%', verticalAlign: 'top' }}
                                    onLoad={() => {
                                        // fire window resize event to change height
                                        window.dispatchEvent(new Event('resize'));
                                        this.setState({ imgHeight: 'auto' });
                                    }}
                                />
                            </a>
                        ))}
                    </Carousel>
                    }
                </div>
                {/* 1.0 轮播图 结束 */}

                {/* 2.0 导航模块 开始  */}
                <div className={Css.index_nav}>
                    {/* map 遍历 */}
                    {navs.map(v => <div className={Css.nav_item} key={v.id}><img src={v.src}></img><p>{v.name}</p> </div>)}
                </div>
                {/* 2.0 导航模块 结束  */}

                {/* 3.0 租房小组 开始 */}
                <div className={Css.index_group}>
                    <div className={Css.index_title}>
                        <span>租房小组</span>
                        <span>更多</span>
                    </div>
                    <div className={Css.index_content}>
                        {groupList.map(v => <div key={v.id} className={Css.group_item}>
                            <div className={Css.group_item_info}>
                                <div className={Css.group_item_title}>
                                    {v.title}
                                </div>
                                <div className={Css.group_item_desc}>
                                    {v.desc}
                                </div>
                            </div>
                            <div className={Css.group_item_img}>
                                <img src={"http://157.122.54.189:9060" + v.imgSrc} />
                            </div>
                        </div>)}
                    </div>
                </div>
                {/* 3.0 租房小组 结束 */}

                {/* 4.0 最新资讯 开始 */}
                <div className={Css.index_news}>
                    <div className={Css.news_title}>最新资讯</div>
                    <div className={Css.news_content}>
                        {newlist.map(v => <div key={v.id} className={Css.news_item}>
                            <div className={Css.news_item_img}>
                                <img src={"http://157.122.54.189:9060" + v.imgSrc} />
                            </div>
                            <div className={Css.news_item_info}>
                                <div className={Css.news_item_title}>{v.title}</div>
                                <div className={Css.news_item_desc}>
                                    <span className={Css.from}>{v.from}</span>
                                    <span className={Css.date}>{v.date}</span>
                                </div>
                            </div>
                        </div>)}
                    </div>
                </div>
                {/* 4.0 最新资讯 结束 */}
            </div>
        )
    }
}

export default Index;
